<template>
  <div class="header" ref="header">
    <div class="left">
      <div class="title">
        <img src="/public/car.png" alt="" />
        <span>共享电动陈管理系统</span>
      </div>
      <div class="func-item">
        <template v-for="menu in menus">
          <div @click="handle(menu.path)">
            {{ menu.content }}
          </div>
        </template>
      </div>
    </div>
    <div class="right">
      <span>{{ currentLoginName }}</span>
      <i class="iconfont icon-shuxian"></i>
      <span @click="toDataCenter">数据中心</span>
      <i class="iconfont icon-shuxian"></i>
      <span @click="reLogin">登出</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { usePostStore } from "@/stores";
import { storeToRefs } from "pinia";
const stores = usePostStore();
const { currentLoginName, currentLoginType } = storeToRefs(stores);
const router = useRouter();
const header = ref(null);
const menus = ref([]);
const menusOrigin = [
  { content: "区域管理", path: "/region-management" },
  { content: "车辆查询", path: "/query-cars" },
  { content: "轨迹查询", path: "/query-trajectory" },
  { content: "任务中心", path: "/task-center" },
  { content: "车辆投放", path: "/vehicle-deployment" },
];
//监听tyep的改变
watch(currentLoginType, () => {
  getMenus();
});
onMounted(() => {
  header.value.style.width = window.innerWidth + "px";
  header.value.style.height = window.innerHeight * 0.06 + "px";
  getMenus();
});
const getMenus = () => {
  //管理员的类型
  if (currentLoginType.value == 1 || currentLoginType.value == 2) {
    menus.value = menusOrigin;
  } else if (currentLoginType.value == 3) {
    menus.value = menusOrigin.slice(0, 3);
  }
};
const handle = (path) => {
  router.push({ path: path });
};
const toDataCenter = () => {
  router.push({ path: "/data-center" });
};

//重新登录
const reLogin = () => {
  router.push({ path: "/login" });
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}
.header .left {
  display: flex;
  margin-left: 20px;
}
.header .left .title img {
  width: 25px;
}
.header .left .title span {
  font-size: 20px;
  font-weight: 600;
  margin-left: 10px;
}
.header .left .func-item {
  display: flex;
  align-items: center;
  margin: 0px 20px;
  gap: 20px;
  font-size: 14px;
}
.header .left .func-item div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 80px;
}
.header .left .func-item div:hover {
  cursor: pointer;
  background-color: #1a91f8;
}
.header .right {
  margin-right: 20px;
}
.header .right span {
  font-size: 14px;
  font-weight: 600;
}
.header .right span:hover {
  cursor: pointer;
}
</style>
